/*header-contente*/
::selection{
	color: #f8fff2;
	background: #333;
}
.header{
	background: #111;
	width: 100%;
	padding-bottom: 100px; 
}
.logo h1{
	font-family: "Lato-Bold";
	font-size: 24px;
	color: #fff;
}
.logo{
	position: absolute;
	top: 57px;
	left: 30px;
}
.nav{
	position: absolute;
	right: 0px;
	top: 53px;
}
.nav li{
	float: left;
}
.nav li a{
	text-transform: uppercase;
	font-family: "Lato-Bold";
	font-size: 14px;
	color: #fff;
	display:block;
	padding: 10px;
	border-bottom: 3px solid rgba(0,0,0,0);
}
.nav li a:hover{
	border-bottom: 3px solid #fcac45;
}
.mobile-nav{
	position: absolute;
	right: 30px;
	top: 50px;
	display: none;
}
.mobile-nav span{
	display: block;
	width: 43px;
	background: #fff;
	height: 6px;
	margin-top: 5px;
}

/*banner-content*/

.banner{
	padding-top: 50px;
	padding-bottom: 69px;
	background: #111;
}
.banner h2{
	font-size: 44px;
	font-family: "OpenSans-Light";
	color: #fff;
}
.banner span{
	color: #fcac45;
	font-family: "OpenSans-Bold";
	font-size: 44px;
}
.banner p span{
	color: #fff;
	font-size: 20px;
}
.banner p{padding-bottom: 250px;margin-top: 30px;}
.banner-nav{
	height: 46px;
	width: 46px;
	border-radius: 50%;
	border: 2px solid #fff; 
	margin: -70px auto 0;
	line-height: 46px;
}
.banner-nav:hover{
	border: 2px solid #fcac45;
}

/*about-content*/

.about{
	margin-top: 101px;
	float: left;
	clear: both;
	width: 100%;
}
.about-mac{
	width: 45%;
}
.about-content{
	width: 40%;
	transition: width 0.7s linear;
}
.about-content .abu{
	color: black;
	display: inline-block;
	padding-bottom: 17px;
	margin: 15px 0 17px 0;
	background: url(../images/about-yellow.png) no-repeat left bottom;
}
.about .desc{
	color: #6c6c6c;
	margin-bottom: 37px;
}
.about-content li{
	font-family: "OpenSans-Italic";
	font-size: 16px;
	color: #6c6c6c;
}
.about-content li::before{
	content: url(../images/about-li-img.png);	
	padding-right: 10px; 
}
.about-content li span{
	font-size: 18px;
	font-family: "OpenSans-Semibold";
}
.about-content .browse{
	margin-top: 46px;
	width: 193px;
	height: 46px;
	border: 1px solid #7f7f7f;
	border-radius: 3px;
	display: block;
	text-align: center;
	line-height: 46px;
	background: url(../images/about-browse.png) no-repeat 13% center;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
}
.about-content .browse:hover{
	background-color: rgba(252,172,69,1);
	color: rgb(255,255,255);
}

/*team-content*/

.team{
	clear: both;
	background: black;
}
.team-face{
	display: flex;
	flex-flow: row nowrap;
}
.face{
	display: block;
	width: 129px;
	height: 129px;
	border-radius: 50%;
	background: white;
	margin: 0 auto 23px;
}
.face-box{
	text-align: center;
	margin: 94px 0 74px;
}
.face-box:not(:last-child){
	margin-right: 48px;
}
.face-box h3{
	margin-bottom: 5px;
}
.face-box p{
	margin-top: 30px;
}

/*services-content*/
.services .desc{
	color: #6c6c6c;
	text-align: center;
	margin: 42px 0 80px 0;
}
.services-bigbox{
	display: flex;
	flex-flow: row nowrap;
	text-align: center;
	margin: 0
}
.services-imgbox{
	border: 3px solid #fcac45;
	width: 112px;
	height: 112px;
	border-radius: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.services-box p{
	color: #6c6c6c;
}
.services-box{
	margin:0 auto;
	margin-bottom: 101px;
}
.services-box:not(:last-child){
	margin-right: 30px;
}

/*cilents-content*/
.clients{
	background: #111;
}
.clients-img{
	margin-top: 80px;
	padding-bottom: 100px;
}
.clients-img a{
	display: inline-block;
}
.clients-img a:not(:last-child){
	margin-right: 34px;
}
.clients-sprite{
	background: url(../images/clients-sprite.png) no-repeat;
}
.clients-1{
	background-position: 0 -3px;
	width: 164px;
	height: 25px;
}
.clients-2{
	background-position: -197px -7px;
	width: 158px;
	height: 22px;
}
.clients-3{
	background-position: -391px -1px;
	width: 164px;
	height: 27px;
}
.clients-4{
	background-position: -584px 0px;
	width: 164px;
	height: 29px;
}
.clients-5{
	background-position: -780px -2px;
	width: 165px;
	height: 27px;
}

/*work-content*/
.work .desc{
	color: #6c6c6c;
	text-align: center;
	margin: 42px 0 80px 0;
}
.img-nav p , .img-nav a{
	font-size: 18px;
	color: #222;
}
.img-nav ul{
	font-family: "OpenSans";
	float: right;
}
.img-nav ul li{
	float: left;
	text-align: center;
}
.img-nav li:not(:last-child){
	border-right: 1px solid #999;
}
.img-nav li a{
	display: inline-block;
	width: 120px;
}
.img-box{
	display: flex;
	flex-flow: row wrap;
	clear: both;
}
.img-box div{
	margin: 0 auto 30px;
}
.img-box .img-xl-1{
	margin-top: 50px;
}
.img-box .img-xl-3{
	margin-bottom: 50px;
}

/*our-clients*/
.our-clients{
	background: #111;
}
.our-clients .desc{
	color: #e7e7e7;
	text-align: center;
	margin: 42px auto 51px;
	text-transform: uppercase;
	width: 80%;
}
.our-clients .inc{
	text-align: center;
	color: #b2b2b2;
	font-size: 18px;
	padding-bottom: 66px;
}

/*contact-content*/
.contact .desc{
	color: #6c6c6c;
	text-align: center;
	margin: 42px auto 70px;
	width: 65%;
}
.text{
	width: 362px;
	height: 42px;
	display: inline-block;
	border: 1px solid #999;
}
.form{
	margin: 0 auto;
	width: 65%;
}
.name{
	margin: 0 30px 30px 0;
	width: 46%;
}
.email{
	width: 46%;
}
.form input{width: 100%;}
.form p{
	font-size: 14px;
	font-family: "OpenSans";
	color: #636363;
}
.name p span , .email p span , .message span{
	color: red;
}
.message{
	clear: both;
	margin-bottom: 32px;
}
.message textarea{
	width: 100%;
	height: 166px;
	border: 1px solid #999;
	resize: none;
	font-family: "OpenSans";
	font-size: 14px;
}
.form input:focus,textarea:focus{
	border: 1px solid #9818fb;
}
.form .submit{
	width: 165px;
	height: 40px;
	display: block;
	background: #fcac45;
	color: #fff;
	text-align: center;
	line-height: 40px;
	float: right;
	font-size: 15px;
	margin-bottom: 102px;
}

/*footer-content*/
.footer{
	height: 92px;
	background: #111;
	width: 100%;
	clear: both;
	padding-top: 10px;
}
.footer p , .footer a{
	color: #b2b2b2;
	line-height: 92px;
	display: inline-block;
	font-size: 12px;
}
.shares{
	clear: both;
	float: right;
	line-height: 112px;
	height: 92px;
}
.share-sprite{
	background: url(../images/share.png);
}
.share01,.share02,.share03,.share04,.share05{
	width: 32px;
	height: 32px;
	display: inline-block;
}
.shares .share01{background-position: -1px 0;}
.shares .share02{background-position: -45px 0;}
.shares .share03{background-position: -90px 0;}
.shares .share04{background-position: -135px 0;}
.shares .share05{background-position: -180px 0;}
.mylove:hover{color: pink;}




/* header-mobile-nav media-query */
@media screen and (max-width:635px) {
	.mobile-nav{
		display: block;
	}
	.nav{
		display: none;
		background: rgba(17,17,17,.6);
		position: absolute;
		top: 100px;
		left: 0px;
		z-index: 999;
	}
	#nav:target{
		display: block;
		animation: nav-down 0.6s linear;
	}
	#nav::before{
		content: "";
		width: 100%;
		height: 1px;
		background: #fff;
		display: block;
		margin-bottom: 8px;
	}

	@keyframes nav-down{
		0%{
			height: 0px;
			overflow: hidden;
		}
		90%{
			overflow: hidden;
		}
		100%{
			height: 249px;
			overflow: normal;
		}
	}
	.nav li{	
		width: 100%;
		height: 40px;
	}
	.nav li a{
		text-indent: 21px;
	}
	.nav li a:hover{
		border-bottom: none;
		color: #fcac45;
	}
}

/* banner-nav media-query */
@media screen and (max-width:635px) {
	.banner-nav{
		margin-top: -150px;
	}
	.banner h2{
		font-size: 2.2em;
		line-height: 39px;
	}
	.banner h2 .l{
		font-size: 1.2em;
		line-height: 1px;
	}
	.banner p, .banner p span{
		font-size: 1.2em;
	}
}

/* about media-query */
@media screen and (max-width: 1102px) {
	.about-content{
		width: 47%
	}
}
@media screen and (max-width: 1010px) {
	.about-mac{
		width: 75%;
		text-align: right;
		transition: right 0.6s linear;
		float: right;
	}
	.about-mac img{
		width: 100%;
	}
	.about-content{
		width: 100%;
		text-align: center;
	}
	.about-content .li{
		margin-left: 0px;
	}
	.about-content .abu{
		background: none;
	}
	.about-content .cl{
		border-bottom: 3px solid #fcac45;
		text-align: center;
		margin: 10px auto 15px;
		line-height: 1px;
	}
	.about-content .cl p, .about-content .cl span{
		font-size: 2.3em;
	}
	.about-content .browse{
		margin: 23px auto 23px;
	}
}

/* team media-query */
@media screen and (max-width: 690px) {
	.team h2{font-size: 2.5em;}
	.team h2 span{font-size: 1.1em;}
	.team-face{
		display: block;
		column-count: 2;
	}
	.face-box{
		margin: 20px 0 0 0;
	}
	.face-box:not(:last-child){
	margin-right: 0px;
	}
	.dots{
		margin-top: 35px;
	}
}

/* services media-query */
@media screen and (max-width: 740px) {
	.services h2{font-size: 2.5em;}
	.services h2 span{font-size: 1.1em;}
	.services-bigbox{
		display: block;
		column-count: 2;
	}
	.services-box:not(:last-child){
	margin-right: 0px;
	}
}
/* cilents media-query */
@media screen and (max-width: 990px) {
	
}